<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.2/theme-chalk/index.css">
    <link rel="stylesheet" href="/static/global.css">
</head>
<body>
<div id="app" v-cloak>
    <div class="video-header">
        <a href="/"><img src="/static/logo.png" height="40px" style="margin-top: 10px"></a>
        <div class="header-title">{{course.name}} | {{lesson.name}}</div>
        <div style="width: 100px">
            <el-link type="info" :underline="false" icon="el-icon-s-fold" v-if="!sidebar.show" @click="sidebar.show = true">显示目录</el-link>
        </div>
    </div>
    <div class="video-box" :class="{'show-sidebar': sidebar.show}">
        <video controls="controls" preload="auto" x5-playsinline="true" x5-video-player-type="h5" autoplay="autoplay" :src="lesson.resource"></video>
    </div>
    <div class="sidebar" :class="{'show': sidebar.show}">
        <div class="sidebar-body">
            <div class="sidebar-title">
                <span>目录</span>
                <el-link type="info" :underline="false" v-if="sidebar.show" @click="sidebar.show = false"><i class="el-icon-s-unfold"></i></el-link>
            </div>
            <div class="lesson-list">
                <div class="lesson-list_item" v-for="(l, i) in course.lessons" :class="{'active': l.id == lessonId }" @click="play(l)">{{l.name}}</div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.2/index.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<script src="/static/global.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                user: {},
                lessonId: this.$request.params.lessonId,
                courseId: this.$request.params.courseId,
                lesson: {},
                course: {
                    lessons: [],
                },
                sidebar: {
                    show: true
                }
            }
        },
        methods: {
            load: function () {
                let vue = this;

                let url = '/course/detail?courseId=' + vue.courseId;
                return axios.get(url).then(resp => {
                    vue.course = resp.data;

                    if (vue.course) {

                        document.title = vue.course.name;

                        if (vue.course.lessons && vue.course.lessons.length) {
                            if (vue.lessonId) {
                                let filter = vue.course.lessons.filter(x => x.id == vue.lessonId);
                                if (filter.length === 1) {
                                    vue.lesson = filter[0];
                                }
                            } else {
                                vue.lessonId = vue.course.lessons[0].id;
                                vue.lesson = vue.course.lessons[0];
                            }
                        } else {
                            vue.$message.error('课程内容还未发布，暂时无法学习');
                        }
                    } else {
                        vue.$message.error('课程不存在');
                    }
                });
            },
            progress: function () {
                let vue = this;

                axios.post('/course/study/' + vue.courseId + '/' + vue.lessonId);

                setInterval(() => {
                    axios.put('/course/study/' + vue.courseId + '/' + vue.lessonId);
                }, 60 * 1000);
            },
            play: function (lesson) {
                let vue = this;
                window.location.href = '/study.html?courseId=' + vue.courseId + '&lessonId=' + lesson.id;
            }
        },
        mounted: function () {
            let vue = this;
            vue.$loadLoginUser().then(user => {
                if (user) {
                    vue.load().then(() => {
                        vue.progress();
                    });
                } else {
                    vue.$alert('登录后才可进行学习, 是否继续?', '提示', {
                        confirmButtonText: '去登录',
                        callback: action => {
                            window.location.href = '/login.html';
                        }
                    });
                }
            });
        }
    })
</script>
</html>
